<div class="content guide with-sidebar routing-guide">
<h1>路由</h1>
<h2 id="官方路由"><a class="headerlink" href="#官方路由" title="官方路由"></a>官方路由</h2><p>对于大多数单页面应用，都推荐使用官方支持的 <a href="https://github.com/vuejs/vue-router" rel="noopener" target="_blank">vue-router 库</a>。更多细节可以移步 <a href="https://router.vuejs.org/" rel="noopener" target="_blank">vue-router 文档</a>。</p>
<h2 id="从零开始简单的路由"><a class="headerlink" href="#从零开始简单的路由" title="从零开始简单的路由"></a>从零开始简单的路由</h2><p>如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：</p>
<pre><code class="hljs js"><span class="hljs-keyword">const</span> NotFound = { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;p&gt;Page not found&lt;/p&gt;'</span> }
<span class="hljs-keyword">const</span> Home = { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;p&gt;home page&lt;/p&gt;'</span> }
<span class="hljs-keyword">const</span> About = { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;p&gt;about page&lt;/p&gt;'</span> }

<span class="hljs-keyword">const</span> routes = {
  <span class="hljs-string">'/'</span>: Home,
  <span class="hljs-string">'/about'</span>: About
}

<span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">currentRoute</span>: <span class="hljs-built_in">window</span>.location.pathname
  },
  <span class="hljs-attr">computed</span>: {
    ViewComponent () {
      <span class="hljs-keyword">return</span> routes[<span class="hljs-keyword">this</span>.currentRoute] || NotFound
    }
  },
  render (h) { <span class="hljs-keyword">return</span> h(<span class="hljs-keyword">this</span>.ViewComponent) }
})</code></pre>
<p>结合 HTML5 History API，你可以建立一个麻雀虽小五脏俱全的客户端路由器。可以直接看<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example" rel="noopener" target="_blank">实例应用</a>。</p>
<h2 id="整合第三方路由"><a class="headerlink" href="#整合第三方路由" title="整合第三方路由"></a>整合第三方路由</h2><p>如果你有更偏爱的第三方路由，如 <a href="https://github.com/visionmedia/page.js" rel="noopener" target="_blank">Page.js</a> 或者 <a href="https://github.com/flatiron/director" rel="noopener" target="_blank">Director</a>，整合起来也<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs" rel="noopener" target="_blank">一样简单</a>。这里有一个使用了 Page.js 的<a href="https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs" rel="noopener" target="_blank">完整示例</a>。</p>
<div class="guide-links">
<span>← <a href="deployment.html">生产环境部署</a></span>
<span style="float: right;"><a href="state-management.html">状态管理</a> →</span>
</div>
<div class="footer">
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div class="bsa-cpc"></div>
<script>
  (function(){
    if(typeof _bsa !== 'undefined' && _bsa) {
    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
      target: '.bsa-cpc',
      align: 'horizontal',
      disable_css: 'true'
    });
      }
  })();
</script>

    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/srcrouting.md" target="_blank">
      在 GitHub 上编辑此页！
    </a>
</div>
</div>